<template>
  <div class="shopping_car">
    <NavBar title="收货地址" :isLeftBtn="false" />
    <van-address-list
      v-model="addressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="clickItem"
    />
    <van-empty
      v-if="list.length == 0"
      class="custom-image"
      image="https://img.yzcdn.cn/vant/empty-image-error.png"
      description="暂无地址"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import NavBar from "@/components/NavBar.vue";
import { getAddressList } from "@/utils/apis/address";
import { useRoute, useRouter } from "vue-router";
import { Site } from "@/utils/types/site";
export default defineComponent({
  name: "site",
  components: { NavBar },
  setup() {
    const state = reactive({
      list: [],
      newList: [],
      addressId: -1,
    });
    const router = useRouter();
    const route = useRoute();
    const { addressId }: any = route.query;
    const { isOrderMy }: any = route.query;
    console.log(route.query);
    state.addressId = Number(addressId);
    const init = async () => {
      const res = await getAddressList({ pageNumber: 100, pageSize: 1 });
      //   res.data.forEach((item: any) => {
      //     item.id = item.addressId;
      //     item.name = item.userName;
      //     item.tel = item.userPhone;
      //     item.address =
      //       item.provinceName + "-" + item.cityName + "-" + item.regionName;
      //   });
      state.newList = res.data;
      state.list = res.data.map((item: Site) => {
        return {
          id: item.addressId,
          name: item.userName,
          tel: item.userPhone,
          address: `${item.provinceName}-${item.cityName}-${item.regionName}-${item.detailAddress}`,
          isDefault: !!item.defaultFlag,
          detailAddress: item.detailAddress,
        };
      });
      console.log(state.list);
    };
    onMounted(() => {
      // getAddressList
      init();
    });
    const onAdd = () => {
      router.replace({
        path: "/addSite",
      });
    };
    const onEdit = (item: Site) => {
      router.replace({
        path: "/addSite",
        query: {
          addressId: item.addressId,
          addressItem: JSON.stringify(item),
        },
      });
    };
    //选择
    const clickItem = (item: Site) => {
      if (isOrderMy === "/site") {
        return;
      }
      router.replace({
        path: "/statement",
        query: {
          addressId: item.id,
          addressItem: JSON.stringify(item),
        },
      });
    };
    return {
      ...toRefs(state),
      onEdit,
      clickItem,
      onAdd,
    };
  },
});
</script>
<style lang="scss" scoped></style>
